<template><!--发送站内信-->
    <div style="height:100%;">
        <navbar :title="$t('message_msg_title')" :backCallback="back">
            <template #right>
                <span class="font-size15 write-btn-right" v-if="wmsg_subject == '' || wmsg_content_pc == ''">{{ $t('message_send') }}</span>
                <span class="font-size15 write-btn-right cur" @click="submit(instructorInfo.user.usr_ent_id)" v-if="wmsg_subject != '' && wmsg_content_pc != ''">{{ $t('message_send') }}</span>
            </template>
        </navbar>
        <div class="content-noBottom" style="background: #eff1f4;">
            <div class="ter-box clearfix bottom-shadow" style="background: #ffffff;">
                <span class="ter-img-box">
                    <img :src="appUrl + instructorInfo.user.usr_photo" alt=""/>
                </span>
                <div class="ter-word-box">
                    <p class="word-clamp-1 font-size14" style="font-weight: bold;">{{ instructorInfo.user.usr_display_bil }}</p>
                    <div class="font-size11 color999 margin-top5">
                        <span class="margin-right5">{{ level[instructorInfo.instructor.iti_level] }}</span>
                        <span class="margin-right5" v-show="instructorInfo.instructor.iti_type_mark === 'IN'">{{ typeOf[instructorInfo.instructor.iti_type] }}</span>
                        <span>{{ source[instructorInfo.instructor.iti_type_mark] }}</span>
                    </div>
                </div>
            </div>
            <div class="layer-content-box">
                <div class="add-contents-box">
                    <p class="word-title-06">{{ $t('message_subject') }}</p><!--消息标题-->
                    <div class="white-bg bottom-shadow">
                        <textarea v-validate="'tipsTitle'" name="tipsTitle" :placeholder="$t('message_subject_tips')" style="height: 40px;" v-model="wmsg_subject"></textarea>
                        <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsTitle')">{{ $t('exceeded_word_range_tips', {'value': '40'}) }}</p><!--40-->
                    </div>
                    <p class="word-title-06">{{ $t('message_content') }}</p><!--消息描述-->
                    <div class="white-bg bottom-shadow">
                        <textarea v-validate="'tipsDetail'" name="tipsDetail" :placeholder="$t('message_content_tips')" v-model="wmsg_content_pc"></textarea>
                        <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsDetail')">{{ $t('exceeded_word_range_tips', {'value': '1000'}) }}</p><!--1000-->
                    </div>
                </div>
            </div>
        </div>
        <!--tip-->
        <van-dialog
        v-model="leaveHint"
        show-cancel-button
        :title="$t('confirm_exit_1')"
        :message="$t('confirm_exit_content_1')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="$router.go(-1)"
        >
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'SendMessage',
    data() {
        return {
            instructorInfo: this.$store.getters.getInstructor, //讲师
            level: { //级别
                J: this.$t('instructor_level_junior'), //'初级'
                M: this.$t('instructor_level_middle'), //'中级'
                S: this.$t('instructor_level_senior'), //'高级'
                D: this.$t('instructor_level_special') //'特聘'
            },
            typeOf: { //类型
                P: this.$t('instructor_type_part_time'), //'兼职'
                F: this.$t('instructor_type_duty') //'专职'
            },
            source: { //来源
                IN: this.$t('instructor_source_internal'), //'内部讲师'
                EXT: this.$t('instructor_source_External') //'外部讲师'
            },
            wmsg_subject: '', //发送站内信标题
            wmsg_content_pc: '', //发送站内信描述内容
            leaveHint: false //离开提示
        };
    },
    methods: {
        back() {
            if (this.wmsg_subject === '' && this.wmsg_content_pc === '') {
                this.$store.state.course.isShowNav = true;
                this.$router.go(-1);
            } else {
                this.leaveHint = true;
            }
        },
        //发送站内信
        submit(id) {
            this.$validator.validate().then(res => {
                if (res) {
                    this.userId = id;
                    let formData = new FormData();
                    formData.append('usr_ent_id_str', this.userId);
                    formData.append('wmsg_subject', this.wmsg_subject);
                    formData.append('wmsg_content_pc', this.wmsg_content_pc);
                    this.$axios({
                        method: 'POST',
                        url: '/app/message/sendMessage',
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        data: formData
                    }).then(res => {
                        this.$toast(this.$t('send_ok'));
                        setTimeout(() => {
                            this.$store.state.course.isShowNav = true;
                            this.$router.go(-1);
                        }, 3000);
                    });
                };
            });
        }
    },
    created() {
        this.$Validator.extend('tipsTitle', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 80) {
                    return false;
                } else {
                    return true;
                }
            }
        });
        this.$Validator.extend('tipsDetail', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 2000) {
                    return false;
                } else {
                    return true;
                }
            }
        });
    }
};
</script>

<style scoped lang="less">
    .ter-box {
        background: #fafafa;
        padding: 25px 15px 25px 64px;
        .ter-img-box {
            float: left;
            margin-left: -50px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
    }
</style>
